<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DW注册页面</title>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/register.css">
  </head>
  <body>
    <div class="head">
    <h3>D A N I E L&nbsp;&nbsp;&nbsp;W E L L I N G T O N</h3>
    </div>
    <div class="nav">
      <ul>
        <li>会员活动</li>
        <li>手表</li>
        <li>配饰</li>
        <li>礼品套装</li>
        <li>表带</li>
      </ul>
    </div>
    <div class="image">
      <img src="../img/login_banner.jpg" alt="">
    </div>
    <div class="resBox">
      <label for=""> 姓名:</label
      ><input type="text" class="ipts" onchange="userNameHandle(this)" />
      <span></span>
      <br />
      <!-- 这里的this就是指的是这个iput文本输入框 -->
      <label for=""> 密码:</label><input type="password" class="ipts" />
      <span></span>
      <br />
      <input type="button" value="立即注册" id="btn" onclick="resSubmit()" />
    </div>
    <div class="foot">
      <ul>
        <li>使用条款</li>
        <li>隐私保护政策</li>
        <li>防伪声明</li>
        <li>网站地图</li>
      </ul>
      <div class="foot1">
        <ul>
          <li>粤公网安备44030502000796 </li>
          <li>粤ICP备15098750 </li>
          <li>营业执照</li>
        </ul>
      </div>
      <p>ALL RIGHTS RESERVED. COPYRIGHT  © 丹尼尔惠灵顿贸易（深圳）有限公司</p>
    </div>

    <script>
      let isUsername = false;
      let isPassword = false;
      function userNameHandle(userNameIpt) {
        // console.log(userNameIpt);
        let username = userNameIpt.value;
        console.log(username);
        let reg = /^[\w\W]{3,10}$/;
        if (reg.test(username)) {
          //如果用户名格式正确，你就可以传接口去检验用户名是否存在
          //http://jx.xuzhixiang.top/ap/api/checkname.php?username=1
          let resAPI = "http://jx.xuzhixiang.top/ap/api/checkname.php";
          //引入axios.js文件
          let p = axios.get(resAPI, { params: { username: username } });
          p.then(function (res) {
            //res.data才是服务器返回的数据
            console.log(res.data);
            userNameIpt.nextElementSibling.innerHTML = res.data.msg;

            if (res.data.code == 0) {
              userNameIpt.nextElementSibling.style.color = "red";
            }
            if (res.data.code == 1) {
              userNameIpt.nextElementSibling.style.color = "green";
              isUsername = true;
            }
          }).catch(function () {});
        } else {
          userNameIpt.nextElementSibling.innerHTML = "用户名长度只能是3-10位";
          isUsername = false;
        }
      }
      let ipts = document.querySelectorAll("input");
      ipts[1].onchange = function () {
        let password = ipts[1].value;
        console.log(password);
        let reg1 = /^\d{1,6}$/;
        if (reg1.test(password)) {
          ipts[1].nextElementSibling.innerHTML = "密码格式正确";
          ipts[1].nextElementSibling.style.color = "green";
          isPassword = true;
        } else {
          ipts[1].nextElementSibling.innerHTML = "密码只能是1-6位数字";
          ipts[1].nextElementSibling.style.color = "red";
          isPassword= false;
        }
      };
      function resSubmit() {
          console.log("dianjile")
        if (isUsername && isPassword) {
          //当两个输入框的结果都为真的时候，才能去注册提交，然后需要用到注册接口
          // 接口地址：http://jx.xuzhixiang.top/ap/api/reg.php
          // 接口请求方式：get
          // 接口参数：
          //      username用户名
          //      password密码
          // 使用方式
          //      http://jx.xuzhixiang.top/ap/api/reg.php?username=11&password=1212
          // 服务器返回json数据
          let ipts = document.querySelectorAll("input");
          let resSubmitAPI="http://jx.xuzhixiang.top/ap/api/reg.php";
          let username=ipts[0].value;
          let password=ipts[1].value;
          console.log(username,password);
          let p=axios.get(resSubmitAPI,{params:{
              username:username,
              password:password,
          }});
          p.then((res)=>{
            console.log(res.data);
            alert(res.data.msg);
            if(res.data.code==0){
                alert(res.data.msg);
            }else if(res.data.code==1){
                location.href="login.html";
            }


          }).catch(function(){

          })

        }
      }
    </script>
  </body>
</html>
